// 基本信息
import { Variable } from "@/api/interface/iot";
import DialogBox from "@/components/DialogBox";
import SelectDeviceList from "@/components/Sansan/SelectDeviceListAll";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<Variable.ResVariable>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			key: [{ required: true, message: "请输入变量标识", trigger: "blur" }],
			sn: [{ required: true, message: "请选择设备", trigger: "blur" }]
		});
		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		// watchEffect(() => {
		// 	if (attrs.visible) {
		// 			formRef.value?.resetFields();
		// 	}
		// });
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={validData}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item
							label="变量标识"
							prop="key"
							v-slots={{
								label: () => {
									return (
										<>
											<span class="pr-1">变量标识</span>
											<el-tooltip
												raw-content={true}
												show-after={500}
												width="400px"
												v-slots={{
													default: () => {
														return <i class="iconfont iconalert-circle" />;
													},
													content: () => {
														return (
															<div>
																<div>变量标识：数据协议中的数据字段key</div>
																<div>
																	多层变量：如果变量是嵌套JSON，使用“<span class="text-red-600 p-1">.</span>”
																	进行区分。如：system.cpu.used
																</div>
															</div>
														);
													}
												}}
											></el-tooltip>
										</>
									);
								}
							}}
						>
							<el-input v-model={props.detail.key} disabled={props.detail.id ? true : false} />
						</el-form-item>
						<el-form-item label="变量名称" prop="label">
							<el-input v-model={props.detail.label} />
						</el-form-item>
						<el-form-item label="数据类型" prop="type">
							<el-input v-model={props.detail.type} />
						</el-form-item>
						<el-form-item label="设备信息" prop="sn">
							<SelectDeviceList v-model={props.detail.sn} />
						</el-form-item>
					</el-form>
				</DialogBox>
			);
		};
	}
});
